<template>
    <div class="shopCart">
        <div class="cart">
            <div class="cart_promotion_wrapper">
                <div class="cart_promotion_wrapper_row">
                    <span>满40减34</span>
                </div>
            </div>
            <div class="cart_wrapper" @click="showCurrentCart">
                <div class="cart_circle" :class="cartDisable?'disable':'active'"></div>
                <div class="cart_unselected_tip">
                    <span class="cart_unselected_symbol">¥</span>
                    <span class="cart_unselected_price">{{totalPrice}}</span>
                </div>
                <div class="cart_delivery">
                    <span class="cart_delivery_text">免配送费</span>
                    <span class="cart_delivery_text_delete">¥1</span>
                </div>
                <div class="cart_settle cart_unselected_must_color">¥10起送</div>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive, watch, computed } from 'vue';
export default {
    name:'ShopCart',
    setup(props,context){
        const shopCartList = reactive(props.cartList);
        const totalPrice = computed(()=>{
            console.log('shopCartList',shopCartList);
            let total = 0;
            shopCartList.forEach(item=>{
                console.log(item.foodNum,item.foodPrice)
                total += parseInt(item.foodNum * item.foodPrice);
            })
            console.log(total)
            return total;
        })
        // 购物车非禁用状态 才可以触发事件
        const showCurrentCart = () => {
            if(props.cartDisable == false){
                console.log('showCurrentCart')
            }
        }
        return {
            totalPrice,
            showCurrentCart
        }
    },
    props:['cartDisable','cartList']
}
</script>

<style>
.shopCart{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 97;
    width: 100%;
}
.cart_promotion_wrapper{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 0.375rem 0;
    line-height: 1rem;
    background: #fffae9;
    text-align: center;
    font-size: 0.6875rem;
    color: #333;
    z-index: 99;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart_promotion_wrapper_row{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}
.cart_promotion_wrapper_row{
    color: rgb(246, 60, 40);
}
.cart_wrapper{
    box-sizing: border-box;
    width: 100%;
    height: 3.0625rem;
    position: relative;
    background: #fff;
    z-index: 999;
    margin-top: -0.03125rem;
}
.cart_circle{
    width: 4.625rem;
    height: 4.625rem;
    display: flex;
    background-size: 4.625rem 4.625rem;
    background-position: center center;
    background-repeat: no-repeat;
    align-items: center;
    position: absolute;
    top: -1.4063rem;
    left: -0.125rem;
    z-index: 100;
}
.cart .disable{
    background-image: url('@/assets/img/icon/cart-disable.png');
}
.cart .active{
    background-image: url('@/assets/img/icon/cart-active.png');
}
.cart_unselected_tip{
    position: absolute;
    left: 4.375rem;
    top: 0.4688rem;
    font-size: 0.9375rem;
    color: #191919;
}
.cart_unselected_symbol,.cart_selected_symbol{
    font-size: 0.6875rem;
    font-weight: bold;
    letter-spacing: 0.0625rem;
}
.cart_unselected_price,.cart_selected_price{
    font-size: 1.125rem;
    font-weight: bold;
    letter-spacing: 0.0625rem;
}
.cart_delivery{
    position: absolute;
    display: flex;
    top: 1.75rem;
    left: 4.375rem;
    width: 11.25rem;
    height: 0.875rem;
    line-height: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #999;
    font-size: 0.6875rem;
}
.cart_delivery_text{
    padding-right: 0.125rem;
    flex: none;
    position: relative;
}
.cart_delivery_text_delete{
    color: rgb(153, 153, 153);
    text-decoration: line-through;
}
.cart_settle{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 2.5rem;
    width: 6.875rem;
    border-radius: 2.5rem;
    color: #fff;
    font-weight: bold;
    white-space: pre-line;
    transition: background-color 0.3s ease;
    right: 0.625rem;
    top: 0.2813rem;
    background: #02b6fd;
}
.cart_settle.cart_unselected_must_color{
    background-color: #999;
    font-size: 1rem;
}
</style>